<template>
  <div class="api-right" v-loading="isLoading" v-if="widget">
    <div class="api_right-li">
      <h1 class="api_right-h1">{{getName()}}</h1>
      <p class="api_right-p1">{{widget.description}}</p>
      <div class="p2-box">
        <div class="api_right-p2">
          <div class="right-p2_left">
            <span class="left-span1 buts_1" v-if="widget.type == 2">GET</span>
            <span class="left-span1" v-else-if="widget.type == 1">POST</span>
            <span class="left-span1 buts_2" v-else-if="widget.type == 3">PUT</span>
            <span class="left-span1 buts_3" v-else-if="widget.type == 4">DELETE</span>
            <span class="left-span2">{{widget.url}}</span>
            <span @click="copyTab(widget.url)"><i class="el-icon-document-copy"></i></span>
          </div>
          <div class="right-p2_right" @click="collectClick"><i class="el-icon-star-off" :style="`color:${collectChange?'#f5a623;':''}`"></i>收藏</div>
        </div>
        <div class="api_right-p2">
          <div class="right-p2_left">
            <span class="left-span2">{{widget.fullName}}</span>
            <span @click="copyTab(widget.fullName)"><i class="el-icon-document-copy"></i></span>
            <!-- <span class="left-span3">生产环境</span> -->
          </div>
        </div>
      </div>
    </div>
    <div class="api_right-li" v-if="getType(widget, 'parameters').length!=0">
      <h1 class="api_right-h2">请求Request</h1>
      <el-table :data="getType(widget, 'parameters')" style="width: 100%" class="api-table">
        <el-table-column label="参数" width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.key }} <i class="el-icon-document-copy" @click="copyTab(scope.row.key)"></i></span>
          </template>
        </el-table-column>
        <el-table-column label="名称" width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="类型" width="150">
          <template slot-scope="scope">
            <x-code>{{ scope.row.type }}</x-code>
          </template>
        </el-table-column>
        <el-table-column label="是否必填" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.isRequired }}</span>
          </template>
        </el-table-column>
        <el-table-column label="说明">
          <template slot-scope="scope">
            <span>{{ scope.row.intro }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="api_right-li" v-if="widget.parameterObject">
      <h1 class="api_right-h2">请求参数</h1>
      <div class="test-window">
        <div class="test-window_textarea">
          <div class="textarea-copy"><i class="el-icon-document-copy" @click="preCopy('pre_copy')"></i></div>
          <pre class="pre_copy">{{widget.parameterObject}}</pre>
        </div>
      </div>
    </div>
    <div class="api_right-li" v-if="getType(widget, 'response').length!=0">
      <h1 class="api_right-h2">响应Response</h1>
      <el-table :data="getType(widget, 'response')" style="width: 100%" class="api-table">
        <el-table-column label="参数" width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.key }} <i class="el-icon-document-copy" @click="copyTab(scope.row.key)"></i></span>
          </template>
        </el-table-column>
        <el-table-column label="名称" width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="类型" width="150">
          <template slot-scope="scope">
            <x-code>{{ scope.row.type }}</x-code>
          </template>
        </el-table-column>
        <el-table-column label="是否必填" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.isRequired }}</span>
          </template>
        </el-table-column>
        <el-table-column label="说明">
          <template slot-scope="scope">
            <span>{{ scope.row.intro }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="api_right-li" v-if="widget.responseObject">
      <h1 class="api_right-h2">请求参数</h1>
      <!-- <p class="api_right-p1">测试只针对测试环境</p> -->
      <div class="test-window">
        <div class="test-window_textarea">
          <div class="textarea-copy"><i class="el-icon-document-copy" @click="preCopy('pre_copy')"></i></div>
          <pre class="pre_copy">{{widget.responseObject}}</pre>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import ala from 'ala'
  export default {
    data () {
      return {
        tableData: [{ date: 'direction', intro: '设置分割线方向' }, { date: 'direction', intro: '设置分割线方向' }],
        tabIndex: 0,
        widget: {},
        isLoading: true,
        collectChange: false
      }
    },
    methods: {
      async init (data) {
        this.collectChange = false
        this.isLoading = true
        this.widget = data
        this.isLoading = false
        if (this.widget.parameters.length > 0) {
          let widgetData = this.widget.parameters[0]
          ala.get('DevelopCollect', { way: 1, key: widgetData.type }).then(result => {
            if (result.id) this.collectChange = true
            else this.collectChange = false
          })
        }
      },
      async copyTab (val) {
        var textArea = document.createElement('textarea')
        var elementID = 'cp_hgz_input'
        textArea.setAttribute('id', elementID)
        textArea.value = val
        document.body.appendChild(textArea)
        document.getElementById(elementID).select()
        var successful = document.execCommand('copy')
        var msg = successful ? '成功复制到剪贴板' : '该浏览器不支持点击复制到剪贴板'
        document.getElementById(elementID).remove()
        this.$message.success(msg)
      },
      preCopy (preClass) {
        // 复制json格式数据
        var preValue = document.getElementsByClassName(preClass)
        this.copyTab(preValue[0].innerHTML)
      },
      getName () {
        if (this.widget.name) {
          return `${this.widget.name}(${this.widget.url})`
        } else {
          return this.widget.url
        }
      },
      getType (data, type) {
        let list = []
        if (data[type]) {
          if (type === 'parameters') {
            if (data[type][0] && data[type][0].columns) {
              list = data[type][0].columns || []
            }
          } else {
            if (data[type].columns) {
              list = data[type].columns || []
            }
          }
        }
        return list
      },
      // 收藏
      async collectClick() {
        if (this.widget.parameters.length > 0) {
          let data = this.widget.parameters[0]
          let para = {
            type: data.type,
            id: data.id,
            name: data.name,
            key: data.type,
            way: 1
          }
          if (this.collectChange) {
            ala.del('DevelopCollect', para).then(res => {
              if (res.status === 1) {
                this.collectChange = false
                this.$message.success(`${para.type}取消收藏`)
              }
            })
          } else {
            ala.add('DevelopCollect', para).then(res => {
               if (res.id) {
                this.$message.success(`${para.type}收藏成功`)
                this.collectChange = true
              }
            })
          }
        }
      },
      getResponse () {
        let list = []
        if (this.widget.response) {
          if (this.widget.response.columns) {
            list = this.widget.response.columns
          }
        }
        return []
      }
    }
  }
</script>
<style lang="scss">
  @import "./api-right.scss";
</style>